import { Component } from 'react'
import { View, Image, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import image1 from '../../assets/images/1cc29317994ffd46618675af5eeb4ece.jpg'
import image2 from '../../assets/images/9566868075f73bd7f1a2eede2f8bc893.jpg'
import './index.scss'

export default class Gallery extends Component {
  state = {
    images: [
      { id: 1, url: image1, title: '复古文艺', subtitle: 'Retro literature and art' },
      { id: 2, url: image2, title: '经典婚礼', subtitle: 'Classic Wedding' },
      { id: 3, url: image1, title: '优雅风格', subtitle: 'Elegant Style' },
      { id: 4, url: image2, title: '浪漫时刻', subtitle: 'Romantic Moments' },
      { id: 5, url: image1, title: '自然清新', subtitle: 'Fresh & Natural' },
      { id: 6, url: image2, title: '创意摄影', subtitle: 'Creative Photography' },
      { id: 7, url: image1, title: '唯美时光', subtitle: 'Beautiful Times' },
      { id: 8, url: image2, title: '艺术工坊', subtitle: 'Art Workshop' },
    ]
  }

  handleItemClick = (item: any) => {
    Taro.navigateTo({
      url: `/pages/detail/index?id=${item.id}`
    })
  }

  render() {
    const { images } = this.state
    
    // 将图片分成两列
    const leftColumn: any[] = []
    const rightColumn: any[] = []
    
    images.forEach((img, index) => {
      if (index % 2 === 0) {
        leftColumn.push(img)
      } else {
        rightColumn.push(img)
      }
    })

    return (
      <View className='gallery-container'>
        <View className='gallery-col'>
          {leftColumn.map(item => (
            <View 
              key={item.id} 
              className='gallery-item'
              onClick={() => this.handleItemClick(item)}
            >
              <Image src={item.url} mode='widthFix' className='gallery-image' />
              <View className='gallery-text'>
                <Text className='gallery-title retro-font'>{item.title}</Text>
                <Text className='gallery-subtitle retro-font'>{item.subtitle}</Text>
              </View>
            </View>
          ))}
        </View>
        <View className='gallery-col'>
          {rightColumn.map(item => (
            <View 
              key={item.id} 
              className='gallery-item'
              onClick={() => this.handleItemClick(item)}
            >
              <Image src={item.url} mode='widthFix' className='gallery-image' />
              <View className='gallery-text'>
                <Text className='gallery-title retro-font'>{item.title}</Text>
                <Text className='gallery-subtitle retro-font'>{item.subtitle}</Text>
              </View>
            </View>
          ))}
        </View>
      </View>
    )
  }
}
